<template>
  <v-overlay v-if="isShow">
    <v-alert
      :value="alert"
      transition="scale-transition"
      rounded="lg"
      type="error"
      >密码错误</v-alert
    >
    <v-sheet
      color="thirdary"
      :width="$vuetify.breakpoint.mdAndUp ? 500 : '90vw'"
      class="rounded-lg overflow-hidden"
    >
      <v-sheet
        color="primary"
        height="80"
        class="d-flex justify-center align-center p-relative"
        elevation="2"
      >
        <span class="text-h5">欢迎登录微医</span
        ><span
          class="iconfont p-absolute right top mr-4 mt-4 cur-point"
          style="font-size: 1.5rem"
          @click="isShow = false"
          >&#xe639;</span
        ></v-sheet
      >
      <v-container>
        <v-form class="px-10 py-5" ref="form">
          <v-text-field
            label="用户名"
            color="primary"
            light
            v-model="username"
            autocomplete="off"
          ></v-text-field>
          <v-text-field
            label="密码"
            color="primary"
            light
            type="password"
            :error="passIsError"
            :error-messages="errorMessages"
            v-model="password"
            autocomplete="off"
          ></v-text-field>
          <v-btn
            width="100%"
            color="primary"
            class="my-5"
            @click="getLogin()"
            @keyup.enter="getLogin()"
            >登录</v-btn
          >
          <v-btn
            width="100%"
            color="primary"
            @click="$router.push('/userRegister') && (isShow = false)"
            >注册</v-btn
          >
        </v-form>
      </v-container>
    </v-sheet>
  </v-overlay>
</template>



<script>
import eventBus from "../../eventBus/eventBus.js";
import { login } from "../network";
export default {
  data() {
    return {
      isShow: false,

      alert: false,
      alertSetTimeOut: 0,

      passIsError: false,
      errorMessages: "",

      username: "",
      password: "",
    };
  },

  methods: {
    async getLogin() {
      login(this.username, this.password)
        .then((res) => {
          if (res) {
            window.location.reload();
          } else {
            this.alert = true;
            this.passIsError = true;
            this.errorMessages = "密码错误";
          }
        })
        .catch((err) => {
          this.alert = true;
          this.alertSetTimeOut = setTimeout(() => {
            this.alert = false;
            this.passIsError = true;
            this.errorMessages = "密码错误";
          }, 3000);

          throw err;
        });
    },
  },
  mounted() {
    eventBus.$on("openLoginBox", () => {
      this.isShow = true;
    });
  },
};
</script>



<style lang="scss" scoped>
</style>
